import { Form, Button, Card, Breadcrumb, Radio, Select, DatePicker, Table, Space, Tag, Image, Modal, message } from "antd";
import { Link } from "react-router-dom";
import defaultImg from '@/assets/error.png'
import styles from "./index.module.scss";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons"
import { useChannels } from "@/utils/customHooks";
import { getArticles, delArticle } from "@/store/actions/article";
import { useSelector, useDispatch } from "react-redux";
import { useEffect, useRef } from "react";
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
const Article = () => {
    const history = useHistory()
    const statusLabel = [
        { text: "草稿", color: "default" },
        { text: "待审核", color: "blue" },
        { text: "审核通过", color: "green" },
        { text: "审核拒绝", color: "red" },
    ];
    const columns = [
        {
            title: "封面",
            dataIndex: "cover",
            key: "cover",
            render: (cover) => {
                if (cover?.images?.length) {
                    return <Image src={cover.images[0]} style={{ objectFit: "cover" }}
                        width={200}
                        height={120}></Image>
                }
                return <Image src={defaultImg} style={{ objjectFit: 'cover' }} width={200} height={120}></Image>
            },
        },
        {
            title: "标题",
            dataIndex: "title",
            key: "title",
        },
        {
            title: "状态",
            dataIndex: "status",
            key: "status",
            render: (status) => {
                return <Tag color={statusLabel[status].color}>{statusLabel[status].text}</Tag>
            },
        },
        {
            title: "发布时间",
            dataIndex: "pubdate",
            key: "pubdate",
        },
        {
            title: "阅读数",
            dataIndex: "read_count",
            key: "read_count",
        },
        {
            title: "评论数",
            dataIndex: "comment_count",
            key: "comment_count",
        },
        {
            title: "点赞数",
            dataIndex: "like_count",
            key: "like_count",
        },
        {
            title: "操作",
            key: "action",
            render: (_, row) => (
                <Space size="middle">
                    <Button type="link" onClick={() => history.push(`/home/publish/${row.id}`)} icon={<EditOutlined />} />
                    <Button danger type="link" icon={<DeleteOutlined />} onClick={() => {
                        Modal.confirm({
                            title: '您是否删除此文章?',
                            onOk: async () => {
                                console.log(row.id);
                                await dispatch(delArticle(row.id))
                                dispatch(getArticles(paramsRef.current));
                                message.success('删除成功')
                            }
                        })
                    }} />
                </Space>
            ),
        },
    ]
    const dispatch = useDispatch()
    const channels = useChannels()
    const paramsRef = useRef({
        page: 1,
        per_page: 20,
        channel_id: undefined,
        status: undefined,
        begin_pubdate: undefined,
        end_pubdate: undefined,
    })
    const { results, per_page, page, total_count } = useSelector(state => state.article)
    // console.log(results)
    useEffect(() => {
        dispatch(getArticles(paramsRef.current))
    }, [dispatch])

    const onFinish = (values) => {
        paramsRef.current.status = values.status;
        paramsRef.current.channel_id = values.channel_id;
        if (values.dateArr) {
            paramsRef.current.begin_pubdate = values.dateArr[0].format(
                "YYYY-MM-DD HH:mm:ss"
            );
            paramsRef.current.end_pubdate = values.dateArr[1].format(
                "YYYY-MM-DD HH:mm:ss"
            );
        } else {
            paramsRef.current.begin_pubdate = undefined;
            paramsRef.current.end_pubdate = undefined;
        }
        paramsRef.current.page = 1
        dispatch(getArticles(paramsRef.current))
    }

    const onPageChange = (page, pageSize) => {
        paramsRef.current.page = page
        paramsRef.current.per_page = pageSize
        dispatch(getArticles(paramsRef.current))
    }
    return (
        <div className={styles.root}>
            <Card
                title={
                    // 面包屑
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <Link to="/home">首页</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>内容管理</Breadcrumb.Item>
                    </Breadcrumb>
                }
            >
                {/* 表单 */}
                <Form onFinish={onFinish}>
                    <Form.Item label="状态：" name="status">
                        <Radio.Group>
                            <Radio value={undefined}>全部</Radio>
                            <Radio value={0}>草稿</Radio>
                            <Radio value={1}>待审核</Radio>
                            <Radio value={2}>审核通过</Radio>
                            <Radio value={3}>审核失败</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="频道：" name="channel_id">
                        <Select style={{ width: "288px" }}>
                            {
                                channels.map(item =>
                                    <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                                )
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item label="日期：" name="dateArr">
                        <DatePicker.RangePicker></DatePicker.RangePicker>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">筛选</Button>
                    </Form.Item>
                </Form>
            </Card>

            <Card
                title={`根据筛选条件共查询到 ${total_count} 条结果`}
                style={{ marginTop: 24 }}
            >
                <Table rowKey='id' columns={columns} dataSource={results} pagination={{
                    current: page,
                    total: total_count,
                    pageSize: per_page,
                    onChange: onPageChange
                }}></Table>
            </Card>
        </div>
    );
};

export default Article;